<template>
  <HeaderComponent/>
  <img align="middle" class="background1" src="../../assets/images/white.jpg" />
  <div id="Catalog" class="Catalog">
    <div id="Search1" class="Search1">
      <h2 class="title">ALL Order</h2>
      <form @submit.prevent="searchOrder">
        <input id="searchbar" type="text" v-model="keyword" />
        <input type="submit" value="Search" />
      </form>
    </div>
    <table>
      <thead>
      <tr>
        <td>订单ID</td>
        <td>订单实付款</td>
        <td>下单日期</td>
        <td>订单状态</td>
        <td>删除订单</td>
        <td>修改订单</td>
      </tr>
      </thead>
      <tbody>
      <tr v-for="order in orderList" :key="order.orderId">
        <td>
          <div class="menu">
            <label
                :data-t_id="order.orderId"
                @mouseover="showItem()"
                @mouseout="hiddenInform"
            >
              {{ order.orderId }}
            </label>
            <div :id="order.orderId" class="options"></div>
          </div>
        </td>
        <td>{{ order.totalPrice }}</td>
        <td>{{ order.orderDate }}</td>
        <td>
          <div v-if="order.status === '待退款'">
            <a
                :href="'/manage/refundOrder?orderId=' + order.orderId"
                class="Button"
                type="button"
            >
              去退款
            </a>
          </div>
          <div v-if="order.status === '待发货'">
            <a
                :href="'/manage/sendOrder?orderId=' + order.orderId"
                class="Button"
                type="button"
            >
              去发货
            </a>
          </div>
          <label v-if="order.status === '已发货'">已发货</label>
          <label v-if="order.status === '已退款'">已退款</label>
          <label v-if="order.status === '已完成'">已完成</label>
        </td>
        <td>
          <button
              @click="removeOrder(order.orderId)"
              class="Button"
              type="button"
          >
            Remove
          </button>
        </td>
        <td>
          <button
             @click="changeOrder(order.orderId)"
              class="Button"
              type="button"
          >
            Change
          </button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <FooterComponent/>
</template>

<script>
import Header from "@/views/common/header.vue";
import HeaderComponent from "@/views/common/header.vue";
import FooterComponent from "@/views/common/footer.vue";
import axios from "axios";

export default {
  components: {FooterComponent, HeaderComponent, Header},
  data() {
    return {
      keyword: '',
      orderList: [],
    };
  },
   mounted() {
    // 在组件挂载时发送请求获取商品详情
    this.fetchOrder();
  },
  methods: {
    fetchOrder() {
      axios.get('http://localhost:8090/manage/viewOrderManage')
    .then(response => {
            const data = response.data;
              this.orderList = data.data;

          })},
    searchOrder() {

    },
    test(){
          location.reload();
      },
    removeOrder(orderId){
      axios.post('http://localhost:8090/manage/removeOrder',{
        orderId: orderId,
      },{
        headers:{
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        setTimeout(this.test, 300);
        // 请求成功处理
        // 跳转到第二个界面，传递搜索结果
        console.log(response.data);
        this.$router.push('/manage/orderManage')
        });
    },
    changeOrder(orderId){
      this.$router.push('/manage/changeOder/'+orderId)
    },
    showItem(orderId) {
      // 显示订单详情的逻辑
    },
    hiddenInform(event) {
      // 隐藏订单详情的逻辑
    },
  },
};
</script>

<style scoped>
@import "@/assets/css/orderManage.css";
</style>